<template>
  <data-table-app-page>
    <div slot="toolbar">
      <el-form inline :model="searchForm">
          <el-form-item label="标题">
            <el-input v-model="searchForm.title" clearable style="width: 140px"></el-input>
          </el-form-item>
          <el-form-item label="账单日期">
            <el-date-picker
              v-model="searchForm.beginLogDate"
              type="month"
              value-format="yyyyMM"
              style="width: 140px"
            />
            <span>至</span>
            <el-date-picker
              v-model="searchForm.endLogDate"
              type="month"
              value-format="yyyyMM"
              style="width: 140px"
            />
          </el-form-item>
          <el-form-item label="状态">
            <type-select
              v-model="searchForm.state"
              :items="[{text: '待执行', value: 0}, {text: '已执行', value: 1}]"
              style="width: 100px"
            />
          </el-form-item>
          <el-form-item>
            <data-table-query-button :query-params="searchForm" />
          </el-form-item>
        </el-form>
        <el-button
          v-auth:add
          type="primary"
          icon="el-icon-plus"
          @click="onAddClick"
        >
          增加批次
        </el-button>
        <el-button
          type="primary"
          plain
          icon="el-icon-download"
          @click="onDownloadTemplateClick"
        >下载数据模板</el-button>
    </div>
    <data-table
      ref="table"
      url="/api/grant/batch/page"
    >
      <el-table-column prop="batch" label="批次" width="60"></el-table-column>
      <el-table-column prop="logDate" label="账单日期" v-slot="{row}" width="100">
        {{`${row.logDate.substring(0, 4)}年${row.logDate.substring(4, 6)}月`}}
      </el-table-column>
      <el-table-column prop="title" label="标题" width="270" show-overflow-tooltip></el-table-column>
      <el-table-column prop="state" label="状态" width="80" v-slot="{row}">
        <el-tag v-if="row.state" type="success">已执行</el-tag>
        <el-tag v-else type="warning">待执行</el-tag>
      </el-table-column>
      <el-table-column prop="totalPeopleNum" label="总人数" width="62"></el-table-column>
      <el-table-column prop="intoAccountSuccesses" label="入账成功人数" width="104" v-slot="{row}">
        {{row.state == 1 ? row.intoAccountSuccesses : '-'}}
      </el-table-column>
      <el-table-column prop="intoAccountFailNum" label="入账失败人数" width="104" v-slot="{row}">
        <span :style="{color: row.intoAccountFailNum ? '#F56C6C' : ''}">{{row.state == 1 ? row.intoAccountFailNum : '-'}}</span>
      </el-table-column>
      <el-table-column prop="creatorName" label="创建者" width="100" show-overflow-tooltip></el-table-column>
      <el-table-column prop="createDate" label="创建时间" width="152"></el-table-column>
      <el-table-column v-slot="{row}" label="操作" fixed="right" min-width="340">
        <el-button
          type="text"
          size="medium"
          @click="onDownloadClick(row)"
        >
          下载原始文件
        </el-button>
        <el-button
          v-auth:details
          type="text"
          size="medium"
          @click="onDetailsClick(row)"
        >
          查看执行详情
        </el-button>
        <delete-confirm-button
          v-if="row.state == 0"
          v-auth:delete
          type="text"
          size="medium"
          okButtonType="danger"
          @ok="onDeleteClick(row)"
        />
        <el-button
          v-if="row.state == 0"
          v-auth:execute
          :loading="executeLoading"
          type="success"
          icon="el-icon-check"
          @click="onExecuteClick(row)"
        >
          执行
        </el-button>
      </el-table-column>
    </data-table>

    <add-dialog ref="addDialog" />
    <execute-result-dialog ref="executeResultDialog" />
  </data-table-app-page>
</template>
  
<script>
import AddDialog from './AddDialog';
import ExecuteResultDialog from './ExecuteResultDialog';

export default {
  components: {
    AddDialog,
    ExecuteResultDialog
  },
  data() {
    return {
      searchForm: {},
      executeLoading: false,
      permission: '/operation_monitor_center/grant/batch'
    }
  },
  methods: {
    onAddClick() {
      this.$refs.addDialog.show({
        onSuccess: () => {
          this.$refs.table.reloadCurrentPage();
        }
      });
    },
    onDownloadTemplateClick() {
      location.href = '/res/grant_template.xls';
    },
    onDownloadClick(batch) {
      location.href = batch.originFileUrl;
    },
    onDetailsClick(batch) {
      this.$refs.executeResultDialog.open(batch);
    },
    async onExecuteClick(batch) {
      this.executeLoading = true;
      const ret = await this.$http.post('/api/grant/batch/execute', {batch: batch.batch});
      this.executeLoading = false;
      if (ret.success) {
        batch.state = 1;
        this.$message.success(ret.message);
      }
    },
    async onDeleteClick(batch) {
      if (this.executeLoading) return;
      const ret = await this.$http.post('/api/grant/batch/delete', {batch: batch.batch});
      if (ret.success) {
        this.$refs.table.reloadCurrentPage();
        this.$message.success(ret.message);
      }
    }
  }
}
</script>